<template>
  <div class="user_home">
    <!-- 左边 -->
    <div>
      <div>
        <NButton text class="pt-5 pb-5 fs-2"> &lt; 回到首页</NButton>
      </div>

      <!-- 个人信息 -->
      <div class="fs-4">
        <NGradientText type="success">个人首页</NGradientText>
      </div>
    </div>

    <!-- 下 -->

    <!-- 菜单列表:likes messages userinfo edit(reset) -->
    <div>
      <NTabs size="large" @update-value="toPage" placement="left" type="card">
        <NTabPane v-for="t in tabPane" :key="t.name" :name="t.name" :tab="t.tab">
          <RouterView></RouterView>
        </NTabPane>
      </NTabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { NButton, NGradientText, NTab, NTabPane, NTabs } from 'naive-ui'
import { h, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const toPage = (url: string) => {
  router.push(url)
}

const tabPane = ref([
  {
    name: 'likes',
    tab: '我的喜欢',
    url: '/user/main/likes',
  },
  {
    name: 'message',
    tab: '我的消息',
    url: '/user/main/message',
  },
  {
    name: 'reset',
    tab: '设置',
    url: '/user/main/reset',
  },
])

watch(router, (page) => {})
</script>

<style scoped lang="scss">
// 整体布局：上下布局
.user_home {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  // 上方
  > div:first-of-type {
    // height: 10vh;
    border-bottom: 1px solid #d0d0d0;
    padding: 2vh 1vw;
    display: flex;
    align-items: center;
    > div:last-of-type {
      margin: 0 auto;
    }
  }
  // 下方高度自适应
  > div:last-of-type {
    flex: 1;
    display: flex;
    overflow-y: auto;
  }
}
</style>
